<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棋类游戏</title>
		<style>
			.square {
				width: 50px;
				height: 50px;
				border: 1px solid black;
			}

			#pieces,
			#board {
				width: 300px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin: 100px auto;
				background-color: #bfa;
			}

			.piece {
				width: 50px;
				height: 50px;
				background-color: red;
				border-radius: 50%;
				cursor: move;
			}
		</style>
	</head>
	<body>
		<div id="board">
			<div class="square"></div>
			<div class="square"></div>
			<div class="square"></div>
			<!-- 更多方格... -->
		</div>
		<div id="pieces">
			<div class="piece" id="piece1" draggable="true"></div>
			<div class="piece" id="piece2" draggable="true"></div>
			<div class="piece" id="piece3" draggable="true"></div>
			<!-- 更多棋子... -->
		</div>
		<script src="index.js"></script>
	</body>
</html>